<!--
 * @Author: XY
 * @Date: 2023-11-09 13:27:45
 * @LastEditors: XY
 * @LastEditTime: 2023-12-13 13:28:05
 * @FilePath: \friendsApp\see_you\src\views\homePage\search.vue
 -->

<template>
  <div class="box">
    <div class="box-top">
      <div class="head" id="head">
        <!-- <router-link to="/index" back> -->
        <div class="head-location" @click="toIndex">
          <van-icon name="arrow-left" size="24" />
        </div>
        <!-- </router-link> -->
        <div class="head-search">
          <van-search v-model="searchParameter.nickname" :clearable="false" show-action shape="round"
            placeholder="请输入用户昵称">
            <template #action>
              <div v-debounce="getData">搜索</div>
            </template>
            <template #right-icon>
              <img @click="empty" v-if="searchParameter.nickname" class="img-icon"
                :src="require('@/assets/iconLogin/input-clear.png')" />
            </template>
          </van-search>
          <!-- <input type="search" :value="searchParameter.nickname" @change="setInputValue($event.target.value)" placeholder="请输入用户昵称"> -->
          <!-- <div class="head-search-btn" v-debounce="getData">搜索</div> -->
        </div>
      </div>
      <!-- 列表 -->
      <div class="list" :style="{ height: windowHeight - stickyHeight - tabbarHeight + 'px' }">
        <van-list v-model="loading" :finished="finished" @load="getData">
          <div class="list-info" v-for="item in dataList" :key="item.uid" @click="goPage(item.uid)">
            <div class="list-info-headImg">
              <img :src="item.avatar" alt="" />
            </div>
            <div class="list-info-message">
              <div class="list-info-message-line1">
                <div class="list-info-message-line1-name">
                  {{ item.nickname }}
                </div>
                <div class="list-info-message-line1-age" v-if="item.sex == 2">
                  <img src="@/assets/iconIndex/girl.png" />{{ item.age }}
                </div>
                <div class="list-info-message-line1-age" v-if="item.sex == 1" style="background: #cde1fd; color: #3662ec">
                  <img src="@/assets/iconIndex/boy.png" />{{ item.age }}
                </div>
                <div class="list-info-message-line1-vip" v-if="item.is_svip == 1">
                  <img src="@/assets/iconIndex/vip.png" alt="" />
                </div>
              </div>
              <div class="list-info-message-line2">
                <div class="list-info-message-line2-describe">
                  {{ item.describe }}
                </div>
                <div class="list-info-message-line2-distance">
                  {{ item.distance }}
                </div>
              </div>
            </div>
          </div>

          <template #finished>
            <div class="bottom" v-if="dataList.length > 0">— THE END—</div>
          </template>
        </van-list>
      </div>
    </div>
  </div>
</template>

<script>
import { location } from '@/utils/getLocation'
import { getReigonTree } from '@/api/index'
import { Toast } from 'vant'

export default {
  name: 'Search',
  data() {
    return {
      dataList: [],
      stickyHeight: 0,
      windowHeight: 0,
      tabbarHeight: 0,
      searchParameter: {
        // * 分页参数    * 页大小 （默认10）
        limit: 10,
        // * 经度 必填
        lng: '',
        // * 纬度 必填
        lat: '',
        // * 用户类型 默认 merchant * merchant 商家 * user 用户 必填
        userType: '',
        // * 昵称
        nickname: '',
        // * 分页参数* 当前页 （默认1）
        page: 1,
      },
      loading: false,
      finished: true,
    }
  },
  mounted() {
    this.stickyHeight = document.getElementById('head').clientHeight
    this.windowHeight = document.documentElement.clientHeight
    this.$nextTick(() => {
      if (!this.$store.getters['cityInfo']) {
        this.$store.dispatch('getCityInfo', '')
      } else {
        this.searchParameter.lng = this.$store.getters['cityInfo'].lng
        this.searchParameter.lat = this.$store.getters['cityInfo'].lat
      }
      if (JSON.stringify(this.$store.state.userInfo) == '{}') {
      }
      if (this.$store.state.userInfo) {
        this.searchParameter.userType =
          this.$store.state.userInfo.is_merchant == 0 ? 'user' : 'merchant'
      }

    })
  },

  methods: {
    goPage(id) {
      this.$router.push({
        path: '/detail',
        query: {
          id: id,
        },
      })
    },
    toIndex() {
      this.searchParameter.nickname = ''
      this.dataList = [];
      this.$router.push({
        path: '/index',
      })
    },
    empty() {
      this.searchParameter.nickname = ''
      this.dataList = [];
    },
    setInputValue(e) {
      this.searchParameter.nickname = e
    },
    // 获取数据
    async getData() {
      if (this.searchParameter.nickname == '') {
        Toast('搜索不能为空')
        return
      }
      const queryString = Object.keys(this.searchParameter)
        .map((key) => {
          console.log(typeof this.searchParameter[key])
          if (this.searchParameter[key] && !!this.searchParameter[key]) {
            return `${encodeURIComponent(key)}=${encodeURIComponent(
              this.searchParameter[key]
            )}`
          }
        })
        .filter((res) => {
          return res
        })
        .join('&')
      console.log(this.searchParameter)
      await getReigonTree(queryString).then((res) => {
        this.dataList = []
        let list = []
        res.data.list.forEach((el) => {
          el.describe =
            el?.height +
            'cm |' +
            el?.weight +
            'kg |' +
            el?.constellation +
            (el?.constellation ? '|' : '') +
            el?.occupation
        })

        if (res.data.count == this.searchParameter.limit) {
          this.searchParameter.page++;
        }

        this.dataList = list.concat(...res.data.list)
        // 加载状态结束
        console.log(this.dataList)
        this.loading = false
        this.finished = true
      })


    },
  },
}
</script>

<style  lang="scss" scoped>
.head-search {
  ::v-deep .van-field__right-icon {
    line-height: 50% !important;
  }

  ::v-deep & .van-field__left-icon {
    display: none !important;
  }

  ::v-deep & .van-search--show-action {
    box-sizing: border-box !important;
    padding: 0px !important;
    width: 100% !important;
  }

  ::v-deep & .van-search {
    background: none;
  }

  ::v-deep & .van-field__control {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #767676;
  }

  ::v-deep & .van-search__content--round {
    border-radius: 8px 0px 0px 8px;

    border: 1px solid #cde1fd;
    border-right: 0px;
  }

  ::v-deep & .van-search__action {
    width: 60px;
    background: linear-gradient(180deg, #3764ec 0%, #6b85f7 100%);
    border-radius: 0px 8px 8px 0px;
    height: 35.4px;
    text-align: center;
    line-height: 38px;
    font-size: 14px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ffffff;
  }
}

.box {
  // padding: 16px;
  height: 100vh !important;
  overflow-y: hidden !important;
  box-sizing: border-box;
}

.head {
  background: linear-gradient(180deg, #cde1fd 0%, rgba(255, 255, 255, 0) 100%);
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  font-weight: 400;
  color: #1a1a1a;

  &-location {
    flex: 1;
    // width: 10px;
    // margin-right: 16px;
  }

  &-search {
    flex: 9;
    display: flex;
    align-items: center;

    // input {
    //   height: 32px;
    //   background: #ffffff;
    //   border-radius: 8px 0px 0px 8px;
    //   border: 1px solid #cde1fd;
    //   flex: 1;
    //   padding-left: 10px;
    // }

    // &-btn {
    //   width: 60px;
    //   height: 32px;
    //   background: linear-gradient(180deg, #3764ec 0%, #6b85f7 100%);
    //   border: 1px solid linear-gradient(180deg, #3764ec 0%, #6b85f7 100%);
    //   border-radius: 0px 8px 8px 0px;
    //   font-size: 14px;
    //   font-weight: 400;
    //   color: #ffffff;
    //   display: flex;
    //   justify-content: center;
    //   align-items: center;
    // }
  }
}

.list {
  overflow-y: auto;
  margin: 0px 16px;

  &-info {
    display: flex;
    border-bottom: 1px solid #d8d8d8;
    // margin: 20px 0;
    // margin-bottom: 20px;
    // padding-bottom: 20px;
    padding: 10px 0px;

    &-headImg {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      margin-right: 7px;

      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }

    &-message {
      flex: 1;

      >div {
        display: flex;
        align-items: center;
      }

      &-line1 {
        position: relative;

        >div {
          margin-right: 8px;
        }

        &-name {
          font-size: 16px;
          font-weight: 500;
          color: #1a1a1a;
        }

        &-age {
          width: 38px;
          height: 16px;
          background: #fcdbdb;
          border-radius: 8px;
          color: #fa5151;
          font-size: 12px;
          display: flex;
          align-items: center;
          justify-content: center;

          img {
            margin-right: 2px;
          }
        }

        &-vip {
          display: flex;
          align-items: center;
        }
      }

      &-line2 {
        display: flex;
        justify-content: space-between;
        font-size: 12px;
        color: #767676;
        line-height: 12px;
        padding: 8px 0;

        &-describe {}

        &-distance {}
      }
    }
  }
}

.bottom {
  text-align: center;
  padding: 25px 0px;
  font-size: 10px;
  font-weight: 400;
  color: #aaaaaa;
  line-height: 10px;
}

::-webkit-scrollbar {
  display: none;
  /* Chrome Safari */
}
</style>
